<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flask Lights Control</title>
    <link rel="stylesheet" href="../static/css/main.css" />
    <link rel="stylesheet" href="../static/css/common.css" />
    <style>
        body {
            margin: 0;
            overflow: hidden;
            height: 100vh;
            width: 100vw;
            position: relative;
            font-family: Arial, sans-serif;
        }

        .vanta-canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
        }

        .container {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100%;
            width: 100%;
            padding: 20px 0;
            border-radius: 10px;
            z-index: 1;
        }

        .dropdown {
            margin-top: 20px;
            margin-bottom: 20px;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;
            box-shadow: 0 0 20px rgba(0, 255, 255, 0.7);
            padding: 20px;
            border-radius: 10px;
            width: 90%;
        }

        .dropdown select,
        .dropdown button {
            margin: 5px;
            padding: 20px;
            border-radius: 5px;
            border: 1px solid #ccc;
            font-size: 16px;
            cursor: pointer;
        }

        .dropdown button {
            background-color: #007bff;
            color: #ffffff;
            border: none;
            transition: background-color 0.3s;
        }

        .dropdown button:hover {
            background-color: #0056b3;
        }

        .number_box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 92%;
        }

        .number_item {
            box-shadow: 0 0 20px rgba(0, 255, 255, 0.7);
            border-radius: 8px;
            width: 48%;
        }

        .number_item_label {
            font-size: 18px;
            margin-bottom: 10px;
            font-weight: bold;
            text-align: center;
            border-bottom: 1px solid #ccc;
            padding: 15px;
            color: #fff;
        }

        .number_item_container {
            display: flex;
            justify-content: space-around;
            padding: 15px;
        }

        .number_item_box {
            background-color: #4797ec;
            width: 100px;
            height: 50px;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 18px;
        }

        .left,
        .right {
            border: 1px solid #ccc;
            box-shadow: 0 0 20px rgba(0, 255, 255, 0.7);
            margin: 10px;
        }

        .left {
            width: 70%;
        }

        .right {
            width: 30%;
        }

        .section-title {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 10px;
            text-align: center;
            color: #fff;
            padding: 20px 0;
            border-bottom: 1px solid #ccc;
        }

        .box1 {
            background-color: rgb(102 102 102 / 50%);
            margin: 10px 20px;
            padding: 10px;
            border-radius: 10px;
            height: 26%;
        }

        .box1-title {
            font-size: 20px;
            font-weight: bold;
            text-align: center;
            margin-bottom: 5px;
            color: #fff;
            padding: 5px 0;
        }

        .box2 {
            background-color: rgb(102 102 102 / 50%);
            margin: 10px 20px;
            padding: 5px;
            border-radius: 10px;
            height: 26%;
        }

        .box2-title {
            font-size: 20px;
            font-weight: bold;
            text-align: center;
            margin-bottom: 5px;
            color: #fff;
            padding: 5px 0;
        }

        .box3 {
            background-color: rgb(102 102 102 / 50%);
            margin: 10px 20px;
            padding: 5px;
            border-radius: 10px;
            height: 23%;
        }

        .box3-title {
            font-size: 20px;
            font-weight: bold;
            text-align: center;
            margin-bottom: 5px;
            color: #fff;
            padding: 5px 0;
        }

        .box4 {
            background-color: rgb(102 102 102 / 50%);
            margin: 10px 20px;
            padding: 5px;
            border-radius: 10px;
            height: 40%;
        }

        .box4-title {
            font-size: 20px;
            font-weight: bold;
            text-align: center;
            margin-bottom: 5px;
            color: #fff;
            padding: 5px 0;
        }

        .box5 {
            background-color: rgb(102 102 102 / 50%);
            margin: 10px 20px;
            padding: 5px;
            border-radius: 10px;
            height: 40%;
        }

        .box5-title {
            font-size: 20px;
            font-weight: bold;
            text-align: center;
            margin-bottom: 5px;
            color: #fff;
            padding: 5px 0;
        }


        .lights,
        .buttons,
        .special-buttons,
        .control-btn-container {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        .light,
        .button,
        .special-button {
            width: 50px;
            height: 50px;
            margin: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            border-radius: 10px;
            cursor: pointer;
            /* background-color: #ddd; */
            transition: background-color 0.3s;
        }

        .light.on {
            background-color: red;
        }

        .button {
            background-color: #007bff;
            color: #ffffff;
        }

        .button:hover {
            background-color: #0056b3;
        }

        .special-button {
            background-color: #28a745;
            color: #ffffff;
            width: 145px;
            height: 70px;
        }

        .special-button:hover {
            background-color: #218838;
        }

        /* 
        .control-btn-container li {
            list-style: none;
            width: 80px;
            background-color: #ffc107;
            color: #ffffff;
        }

        .control-btn-container li:hover {
            background-color: #e0a800;
        } */

        .title-container {
            display: flex;
            justify-content: center;
            align-items: center;
            /* background-color: rgba(0, 0, 0, 0.8); */
            padding: 20px;
            border-radius: 10px;
            /* margin-top: 20px; */
            box-shadow: 0 0 20px rgba(0, 255, 255, 0.7);
            width: 90%;
        }

        .title-container h1 {
            color: #00ffcc;
            font-size: 2.5rem;
            font-weight: bold;
            text-shadow: 0 0 10px rgba(0, 255, 255, 0.7);
            margin: 0;
        }
    </style>
</head>

<body>
    <script src="../static/js/three.min.js"></script>
    <script src="../static/js/vanta.waves.min.js"></script>
    <script>
        VANTA.WAVES({
            el: "body",
            mouseControls: true,
            touchControls: true,
            gyroControls: false,
            minHeight: 200.0,
            minWidth: 200.0,
            scale: 1.0,
            scaleMobile: 1.0,
            color: 0x172f55,
            shininess: 0,
            waveHeight: 22,
            waveSpeed: 1.05,
            zoom: 0.78,
        });
    </script>
    <div class="container">
        <div class="title-container">
            <h1>消防控制系统</h1>
        </div>
        <div class="dropdown">
            <select id="serialPorts">
                <option value="" disabled selected>Select a Serial Port</option>
            </select>
            <button onclick="searchSerialPorts()">Search Serial Ports</button>
            <button onclick="connectSerialPort()">Connect Serial Port</button>
        </div>
        <div class="number_box">
            <div class="number_item">
                <div class="number_item_label">数据显示1</div>
                <div class="number_item_container" id="data1">
                    <div class="number_item_box">85263</div>
                    <div class="number_item_box">96385</div>
                    <div class="number_item_box">24563</div>
                    <div class="number_item_box">15826</div>
                    <div class="number_item_box">45263</div>
                </div>
            </div>
            <div class="number_item" style="margin-left: 10px;">
                <div class="number_item_label">数据显示2</div>
                <div class="number_item_container" id="data2">
                    <div class="number_item_box">85263</div>
                    <div class="number_item_box">96385</div>
                    <div class="number_item_box">24563</div>
                    <div class="number_item_box">15826</div>
                    <div class="number_item_box">45263</div>
                </div>
            </div>
        </div>
        <div style="display: flex; width: 93%;height: 100%;;margin: 20px 0;">
            <div class="left">
                <div class="section-title">主控制板</div>
                <div class="box1">
                    <div class="box1-title">控制按钮</div>
                    <div class="special-buttons">
                        <ul class="control-btn-container" style="width: 100%;">
                            <li style="width: 200px;line-height: 100px;" onclick="toggleLight(12)"> 1</li>
                            <li style="width: 200px;line-height: 100px;" onclick="toggleLight(13)"> 2</li>
                            <li style="width: 200px;line-height: 100px;" onclick="toggleLight(14)"> 3</li>
                            <li style="width: 200px;line-height: 100px;" onclick="toggleLight(15)"> 4</li>
                        </ul>
                        <!-- <div class="special-button" onclick="specialAction(10)">Special 1</div>
                        <div class="special-button" onclick="specialAction(11)">Special 2</div>
                        <div class="special-button" onclick="specialAction(12)">Special 3</div>
                        <div class="special-button" onclick="specialAction(13)">Special 4</div> -->
                    </div>
                </div>
                <div class="box2">
                    <div class="box2-title">阀门开关</div>
                    <div class="buttons">
                        <ul class="control-btn-container" style="width: 100%;">
                            <li style="width: 90px;line-height: 60px;" onclick="toggleLight(1)">1</li>
                            <li style="width: 90px;line-height: 60px;" onclick="toggleLight(2)">2</li>
                            <li style="width: 90px;line-height: 60px;" onclick="toggleLight(3)">3</li>
                            <li style="width: 90px;line-height: 60px;" onclick="toggleLight(4)">4</li>
                            <li style="width: 90px;line-height: 60px;" onclick="toggleLight(5)">5</li>
                            <li style="width: 90px;line-height: 60px;" onclick="toggleLight(6)">6</li>
                            <li style="width: 90px;line-height: 60px;" onclick="toggleLight(7)">7</li>
                            <li style="width: 90px;line-height: 60px;" onclick="toggleLight(8)">8</li>
                            <li style="width: 90px;line-height: 60px;" onclick="toggleLight(9)">9</li>
                            <li style="width: 90px;line-height: 60px;" onclick="toggleLight(10)">10</li>
                            <li style="width: 90px;line-height: 60px;" onclick="toggleLight(11)">11</li>
                        </ul>
                    </div>
                </div>
                <div class="box3">
                    <div class="box3-title">报警灯</div>
                    <div class="lights">
                        <div class="light" id="light0" style="position: relative;">
                            <img src="" alt="" style="width: 50px;">
                            <div style="color: #fff;">1</div>
                        </div>
                        <div class="light" id="light1">
                            <img src="" alt="" style="width: 50px;">
                            <div style="color: #fff;">2</div>
                        </div>
                        <div class="light" id="light2">
                            <img src="" alt="" style="width: 50px;">
                            <div style="color: #fff;">3</div>
                        </div>
                        <div class="light" id="light3">
                            <img src="" alt="" style="width: 50px;">
                            <div style="color: #fff;">4</div>
                        </div>
                        <div class="light" id="light4">
                            <img src="" alt="" style="width: 50px;">
                            <div style="color: #fff;">5</div>
                        </div>
                        <div class="light" id="light5">
                            <img src="" alt="" style="width: 50px;">
                            <div style="color: #fff;">6</div>
                        </div>
                        <div class="light" id="light6">
                            <img src="" alt="" style="width: 50px;">
                            <div style="color: #fff;">7</div>
                        </div>
                        <div class="light" id="light7">
                            <img src="" alt="" style="width: 50px;">
                            <div style="color: #fff;">8</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="section-title">子控制板</div>
                <div style="height: 100%;">
                    <div class="box4">
                        <div class="box4-title">控制按钮</div>
                        <div class="special-buttons" style="margin-top: 60px;">
                            <ul class="control-btn-container" style="width: 100%;">
                                <li style="width: 140px;line-height: 80px;" onclick="toggleLight(16)"> 1</li>
                                <li style="width: 140px;line-height: 80px;" onclick="toggleLight(17)"> 2</li>
                            </ul>
                            <!-- <div class="special-button" onclick="specialAction(10)">Special 1</div>
                            <div class="special-button" onclick="specialAction(11)">Special 2</div> -->
                        </div>
                    </div>
                    <div class="box5">
                        <div class="box5-title">报警灯</div>
                        <div class="lights" style="margin-top: 60px;">
                            <div class="light" id="light8">
                                <img src="" alt="" style="width: 60px;">
                                <div style="color: #fff;">1</div>
                            </div>
                            <div class="light" id="light9">
                                <img src="" alt="" style="width: 60px;">
                                <div style="color: #fff;">2</div>
                            </div>
                            <div class="light" id="light10">
                                <img src="" alt="" style="width: 60px;">
                                <div style="color: #fff;">3</div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    </div>
    <script>
        async function searchSerialPorts () {
            const response = await fetch('/search_serial_ports');
            const data = await response.json();
            const select = document.getElementById('serialPorts');
            select.innerHTML = '<option value="" disabled selected>Select a Serial Port</option>';
            data.ports.forEach(port => {
                const option = document.createElement('option');
                option.value = port;
                option.text = port;
                select.add(option);
            });
        }

        async function connectSerialPort () {
            const select = document.getElementById('serialPorts');
            const port = select.value;
            if (port) {
                const response = await fetch('/connect_serial_port', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ port: port }),
                });
                const data = await response.json();
                alert(`Connection status: ${data.status}`);
            } else {
                alert('Please select a serial port first.');
            }
        }

        async function toggleLight (index) {
            const response = await fetch('/update_light', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ index: index }),
            });
            const data = await response.json();
            if (!data.success) {
                alert('Error: 串口异常！');
            }
        }

        async function specialAction (action) {
            const response = await fetch('/special_action', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ action: action }),
            });
            const data = await response.json();
            if (!data.success) {
                alert('Error: 串口异常！');
            }
        }

        document.addEventListener('DOMContentLoaded', () => {
            // let lightsStatuss = [false, false, false, false, false, false, false, false, false, false, false]
            // console.log('lightsStatuss==>', lightsStatuss)
            // lightsStatuss.forEach((status, index) => {
            //     let lightElement = document.getElementById(`light${index}`).querySelector('img');
            //     lightElement.src = status ? '../static/img/warm.png' : '../static/img/warming.png';
            // });
            fetchLightsStatus();
            setInterval(fetchLightsStatus, 10000);
            setInterval(numberListData, 100);
        });

        async function numberListData () {
            // 这里调用后端接口
             const response = await fetch('/numberListData', {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
                 },
             });
            // 假设返回的数据结构是 { data1: [85263, 96385, 24563, ...], data2: [85263, 96385, ...] }
            //const response = { data1: [85263, 96385, 24563, 15896, 45632], data2: [85263, 96385, 14744, 22332, 68745] }
            const dataRes = await response.json();
            console.log("反应：",response);
            const data1 = dataRes.data1;
            console.log("datA1",response);
            const data2 = dataRes.data2;
            // 更新数据显示1
            const data1Container = document.getElementById('data1');
            data1Container.innerHTML = '';
            data1.forEach(item => {
                const div = document.createElement('div');
                div.className = 'number_item_box';
                div.textContent = item;
                data1Container.appendChild(div);
            });
            // 更新数据显示2
            const data2Container = document.getElementById('data2');
            data2Container.innerHTML = ''; // 清空原有内容
            data2.forEach(item => {
                const div = document.createElement('div');
                div.className = 'number_item_box';
                div.textContent = item;
                data2Container.appendChild(div);
            });
        }

        async function fetchLightsStatus () {
            const response = await fetch('/get_lights_status', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
            });
            const data = await response.json();
            updateLightsDisplay(data.lights_status);
        }

        function updateLightsDisplay (lightsStatus) {
            lightsStatus.forEach((status, index) => {
                let lightElement = document.getElementById(`light${index}`).querySelector('img');
                lightElement.src = status ? '../static/img/warm.png' : '../static/img/warming_red.png';
            });
            // for (let i = 0; i < lightsStatus.length; i++) {
            //     const light = document.getElementById(`light${i}`);
            //     if (lightsStatus[i]) {
            //         light.classList.add('on');
            //     } else {
            //         light.classList.remove('on');
            //     }
            // }
        }
    </script>
</body>

</html>